<template>
    <div class="music" id="QPlayer">
        <div id="pContent">
            <div id="player">
                <span class="cover"></span>
                <div class="ctrl">
                    <div class="musicTag marquee">
                        <strong>Title</strong>
                        <span> - </span>
                        <span class="artist">Artist</span>
                    </div>
                    <div class="progress">
                        <div class="timer left">0:00</div>
                        <div class="contr">
                            <div class="rewind icon"></div>
                            <div class="playback icon"></div>
                            <div class="fastforward icon"></div>
                        </div>
                        <div class="right">
                            <div class="liebiao icon"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ssBtn">
                <div class="adf"></div>
            </div>
        </div>
        <ol id="playlist"></ol>
    </div>
</template>
<script>
    import '@/assets/plugins/player/js/jquery.marquee.min.js'
    import {play_music} from '@/assets/plugins/player/js/player.js'
    export default{
        name: 'music',
        data () {
            return {
                msg: 'music'
            }
        },
        methods:{
            bgChange:function(){
                var lis= $('.lib');
                for(var i=0; i<lis.length; i+=2)
                    lis[i].style.background = 'rgba(246, 246, 246, 0.5)'
            }
        },
        mounted:function () {
            this.bgChange()
            play_music()
        },
    }
</script>

<style>

</style>